<template>
  <div class="app-container calendar-list-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input style="width: 30%" placeholder="输入菜单名称" v-model="search"></el-input>
      <el-button class="filter-item" type="primary" @click="handleAdd" icon="el-icon-edit">添加</el-button>
      <el-button class="filter-item" type="primary" @click="handleUpdate"  icon="el-icon-edit">修改</el-button>
      <el-button class="filter-item" type="danger" @click="handleDelete" >删除</el-button>
    </div>
    <div style="width: 30%">
    <el-tree class="filter-tree"
             :data="menuData"
             :props="defaultProps"
             :filter-node-method="filterNode"
             ref="menuTree">
    </el-tree>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog  :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form  :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="70px" style='width: 700px; margin-left:20px;'>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称" prop="title">
              <el-input v-model="dataForm.title" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路径" prop="path">
            <el-input  v-model="dataForm.path" clearable placeholder="菜单sys,按钮create/update/delete" auto-complete="off"></el-input>
          </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编号" prop="name">
              <el-input  v-model="dataForm.name" clearable placeholder="菜单sys,按钮create/update/delete" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路径" prop="path">
              <el-input  v-model="dataForm.path" clearable placeholder="菜单sys,按钮create/update/delete" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button>
        <el-button v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMenu, createMenu, updateMenu, deleteMenu } from '@/api/admin'
import waves from '@/directive/waves' // 水波纹指令
import auth from '@/directive/auth' // 水波纹指令

export default {
  name: 'MenuManager',
  directives: {
    waves, auth
  },
  watch: {
    search(val) {
      this.$refs.menuTree.filter(val)
    }
  },
  data() {
    return {
      search: '',
      menuData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dataForm: {
        menuId: '',
        menuPid: '',
        path: '',
        name: '',
        title: '',
        icon: '',
        isMenu: 1,
        sort: 1
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      rules: {
        path: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
        title: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '编号不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resetForm() {
      this.dataForm = {
        menuId: '',
        menuPid: '',
        path: '',
        name: '',
        title: '',
        icon: '',
        isMenu: 1,
        sort: 1
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getList() {
      listMenu().then(res => {
        const menus = res.data.data
        this.menuData = this.menuData.concat(menus)
      }).catch(() => {
      })
    },
    handleAdd() {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createMenu() {
      createMenu().then(response => {
        console.log(111)
      }).catch(() => {
        console.log(22)
      })
    },
    updateMenu() {
      updateMenu().then(response => {
        console.log(111)
      }).catch(() => {
        console.log(22)
      })
    },
    deleteMenu() {
      deleteMenu().then(response => {
        console.log(111)
      }).catch(() => {
        console.log(22)
      })
    }
  }
}
</script>
